<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="login-box">
      <div class="login-title">
        <div class="title-main">
          <img :src="logoImg" />
          <span>{{ programTitle }}</span>
        </div>
      </div>
      <div class="title-little">
        <div class="title-little-none"></div>
        <div class="title-little-txt">后端管理平台</div>
      </div>
      <div>
        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          hideRequiredMark
          style="width: 350px"
          @finish="handleLogin"
        >
          <a-form-item label="用户" name="userName">
            <a-input
              v-model:value="formState.userName"
              placeholder="输入用户名"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input
              v-model:value="formState.password"
              type="password"
              autocomplete="off"
            />
            <!-- <a-input-password
              v-model:value="formState.password"
              placeholder="输入密码"
              autocomplete="off"
            /> -->
          </a-form-item>

          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              style="width: 90%; margin: 40px 5% 0"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-spin>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue"; //  onBeforeMount, onMounted,
import { useRouter } from "vue-router";

import { PROGRAM_TITLE } from "@/common/constant";
export default {
  props: {},
  components: {},
  setup() {
    // // #region 生命周期，可重复使用，根据顺序执行
    // onBeforeMount(() => {
    //   console.log('onBeforeMount');
    // });
    // onMounted(() => {
    //   console.log('onMounted1');
    // });
    // onMounted(() => {
    //   console.log('onMounted2');
    // });
    // // #endregion

    // ref：定义响应式变量
    let spinning = ref(false); // loading加载状态
    const programTitle = ref(PROGRAM_TITLE); // 标题
    const logoImg = require("@/assets/images/logo.png"); // Logo

    // 表单
    const formState = reactive({
      userName: "",
      password: "",
    });
    // 校验：用户名
    let validateUser = async (rule, value) => {
      if (value.length === 0) {
        return Promise.reject("请输入用户名");
      } else if (formState.userName.length < 5) {
        return Promise.reject("请输入用户名（最少5位）");
      } else {
        return Promise.resolve();
      }
    };
    // 校验：密码
    let validatePass = async (rule, value) => {
      if (value.length === 0) {
        return Promise.reject("请输入密码");
      } else if (formState.password.length < 6) {
        return Promise.reject("请输入用户名（最少6位）");
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      userName: [
        { required: true, validator: validateUser, trigger: "change" },
      ],
      password: [
        { required: true, validator: validatePass, trigger: "change" },
      ],
    };
    const { proxy } = getCurrentInstance();
    // // const _router = proxy.$router
    // const _http = proxy.$_http;
    // const _API = proxy.$_API;
    const _store = proxy.$store;
    const _router = useRouter();
    const handleLogin = () => {
      spinning.value = true; // 注意setUp内部访问响应式变量是 data.value
      console.log(formState);
      setTimeout(() => {
        _store.commit("common/SET_SCREENHEIGHT", 920);
        _store.commit("user/SET_LOGIN", {
          ...formState,
          token: "1111",
        });
        // let params = {
        //   userName: formState.userName,
        //   password: 'admin',
        // };
        // _http
        //   .get(_API.INTERFACE_GET_USER_LOGIN, { params })
        //   .then((res) => {
        //     console.log(res);
        //   });
        spinning.value = false; // 注意setUp内部访问响应式变量是 data.value
        _router.push({
          name: "home",
        });
      }, 3000);
    };

    return {
      spinning,
      programTitle,
      logoImg,

      formState,
      rules,
      handleLogin,
    };
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@ilogoImgSize: 45px;
.login-box {
  width: 100vw;
  height: 100vh;
  background-image: url("../../assets/images/login/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .login-title {
    .title-main {
      img {
        width: @ilogoImgSize;
        height: @ilogoImgSize;
      }
      span {
        margin-left: 30px;
        font-size: 33px;
        font-weight: bold;
        color: @mainColorBlack;
      }
    }
  }
  .title-little {
    margin-top: 10px;
    margin-bottom: 5%;
    padding-right: 50px;
    display: flex;
    color: @mainColorBlack45;
    .title-little-none {
      width: @ilogoImgSize;
    }
    .title-little-txt {
      margin-left: 35px;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
